import React, { useEffect, useState } from 'react';
import { XoProTable } from '@/components/XoProTable';
import styles from './nickName.less';
import type { ProColumns } from '@ant-design/pro-table';
import {
  courseStepList,
  gamePaperUserDataList,
  gamePaperUserLast,
  groupOptionList,
} from '@/services/situation';
import type { Situation } from '@/models/situation';
import { ProFormSelect } from '@ant-design/pro-form';
import { onRequestNickName } from '@/utils/requestPhone';
// import { Alert, message } from 'antd';
import { history } from 'umi';
import { baseUrl } from '../../../../../config/httpUrl';

export default function Practice(props: any) {
  const courseId = history.location.query?.id;
  const activityId = history.location.query?.activityId;
  const [selectData, setData] = useState<any>([]);
  const [paperId, setPaperId] = useState<any>();
  const { stepIdNew } = props;
  useEffect(() => {
    (async () => {
      const res = await groupOptionList({ activityId: activityId });
      const res1 = res.result?.map((item: any) => {
        return { label: item.name, value: item.id };
      });
      setData(res1);
    })();
    (async () => {
      const res = (await courseStepList({ itemId: Number(courseId) }))?.result;
      res.forEach((item: Situation) => {
        if (item.type == 4) {
          setPaperId(item.sourceId);
        }
      });
    })();
  }, []);
  const onClick = async (record: Situation) => {

    if (record.status == 2) {
      const w = window.open('_black');
      w!.location.href = `${baseUrl.http?.replace(
        '/api',
        '',
      )}/?scene=course_test_view&stepId=${stepIdNew}&uid=${record.uid}&token=${localStorage.getItem('token')}`;
    } else {
      // return <Alert message="用户正在作答，请稍后查看最新的试卷" type="info" style={{width:'200px'}}/>
      // message.error("用户正在作答，请稍后查看最新的试卷");
      alert('用户正在作答，请稍后查看最新的试卷');
    }
  };
  const columns: ProColumns<Situation>[] = [
    {
      dataIndex: 'uid',
      title: '用户ID',
      search: false,
    },
    {
      dataIndex: 'nickname',
      title: '用户昵称',
      search: false,
    },
    {
      dataIndex: 'phone',
      title: '手机号',
      search: false,
    },
    {
      dataIndex: 'uid',
      title: '昵称/手机号',
      width: 150,
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            wrapperCol={{ span: 24 }}
            showSearch
            debounceTime={500}
            name="uid"
            request={onRequestNickName}
          />
        );
      },
    },
    {
      dataIndex: 'groupName',
      title: '班级',
      renderFormItem: () => {
        return (
          <ProFormSelect
            name="groupId"
            placeholder="请选择"
            debounceTime={500}
            colon={false}
            options={selectData}
          />
        );
      },
    },
    {
      dataIndex: 'teacherName',
      title: '辅导老师',
      search: false,
    },
    {
      dataIndex: 'repeat',
      title: '作答次数',
      search: false,
      render: (_, record) => {
        return <div>{record.repeat ? record.repeat : '-'}</div>;
      },
    },
    {
      dataIndex: 'crystal',
      title: '练习题得钻',
      search: false,
    },
    {
      dataIndex: 'firstRightQuestionCount',
      title: '练习题(首次)',
      search: false,
    },
    {
      dataIndex: 'lastRightQuestionCount',
      title: '练习题(末次)',
      search: false,
    },
    {
      dataIndex: 'option',
      title: '操作',
      search: false,
      fixed: 'right',
      render: (_, record) => {
        if (record.status && record.status !== 0 && record.repeat && record.repeat !== 0) {
          return <a onClick={() => onClick(record)}>查看试卷</a>;
        } else {
          return <div>-</div>;
        }
      },
    },
  ];

  return (
    <XoProTable
      className={styles.playlist}
      request={async (params) => {
        const body = (await gamePaperUserDataList({ ...params, stepId: Number(stepIdNew) }))
          ?.result;
        return {
          data: body?.records,
          total: body?.total,
        };
      }}
      options={false}
      rowKey="key"
      scroll={{ x: 2000 }}
      columns={columns}
      hasIndex={false}
    />
  );
}
